<template>
    <el-container>
        <el-header>
            <el-row>
                <el-col :span="24">
                    <h2>欢迎：{{ adminName }}</h2>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-card>
                        <div slot="header">
                            <span>今日销售额</span>
                        </div>
                        <div>
                            <p>{{ todaysTotal  }}</p>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card>
                        <div slot="header">
                            <span>订单数量</span>
                        </div>
                        <div>
                            <p>{{ todaysOrder }}</p>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card>
                        <div slot="header">
                            <span>客户数量</span>
                        </div>
                        <div>
                            <p>{{ todaysConsumer }}</p>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-divider content-position="left">详细数据</el-divider>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
            <el-row>
                <el-col :span="24">
                    <el-card>
                        <div slot="header">
                            <span>当日销售订单</span>
                            <el-button size="small" style="float: right;" @click="moreOrderVisible = true">查看更多</el-button>
                        </div>
                        <div>
                            <el-table :data="orderList" height="400px">
                                <el-table-column property="itemName" label="商品" width="100" />
                                <el-table-column property="itemPrice" label="价格" width="100" />
                                <el-table-column property="itemQuantity" label="数量" width="100" />
                                <el-table-column property="consumerName" label="消费者" width="150" />
                                <el-table-column property="consumer" label="消费卡号" width="200" />
                                <el-table-column property="consumeDate" label="消费日期" />
                            </el-table>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <!-- <el-row :gutter="20">
                <el-col :span="24">
                    <el-card>
                        <div slot="header">
                            <span>近三日销售额</span>
                            <el-button size="small" style="float: right;">查看更多</el-button>
                        </div>
                        <div>
                            <el-table :data="salesData">
                                <el-table-column prop="date" label="日期"></el-table-column>
                                <el-table-column prop="sales" label="销售额"></el-table-column>
                            </el-table>
                        </div>
                    </el-card>
                </el-col>
            </el-row> -->
        </el-main>
    </el-container>
    <el-dialog v-model="moreOrderVisible" title="销售订单" width="90%">
        <el-row justify="center">
            <el-col :span="10">
                <el-date-picker
                    v-model="date"
                    type="date"
                    value-format="YYYY/MM/DD"
                    placeholder="请选择查询日期"
                />
            </el-col>
            <el-col :span="2">
                <el-button type="primary" @click="getOrdersByDate()">查询</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-table :data="moreOrder" height="400">
                    <el-table-column property="itemName" label="商品" width="100" />
                    <el-table-column property="itemPrice" label="价格" width="100" />
                    <el-table-column property="itemQuantity" label="数量" width="100" />
                    <el-table-column property="consumerName" label="消费者" width="150" />
                    <el-table-column property="consumer" label="消费卡号" width="200" />
                    <el-table-column property="consumeDate" label="消费日期" />
                </el-table>
            </el-col>
        </el-row>
    </el-dialog>
</template>

<script>
import { onMounted, reactive, ref, toRefs} from 'vue';
import { useStore } from '../store'
import apiSet from '../plugins/dbApi';

export default {
    setup() {
        const store = useStore()
        const data = reactive({
            adminName: store.getAdminName,
            date: apiSet.getDate(),
            moreOrderDate: apiSet.getDate(),
            moreOrderVisible: false,
            orderList: ref([]),
            moreOrder: ref([]),
            todaysTotal: 0,
            todaysOrder: 0,
            todaysConsumer: 0,
        })
        const methods = reactive({
            getOrdersByDate() {
                apiSet.getOrdersByDate(data.date).then(res => {
                    if (res.status !== 200) {
                        console.log(res.msg);
                        return;
                    }
                    data.moreOrder = res.data;
                    data.todaysTotal = res.data.reduce((acc, cur) => acc + cur.itemPrice, 0);
                }).catch(err => {
                    console.log(err);
                });
            }
        })
        onMounted(() => {
            apiSet.getOrdersByDate(data.date).then(res => {
                if (res.status !== 200) {
                    console.log(res.msg);
                    return;
                }
                data.moreOrder = data.orderList = res.data;
                data.todaysTotal = res.data.reduce((acc, cur) => acc + cur.itemPrice * cur.itemQuantity, 0);
                data.todaysOrder = res.data.length;
                data.todaysConsumer = res.data.reduce((acc, cur) => {
                    if (acc.indexOf(cur.consumer) === -1) {
                        acc.push(cur.consumer);
                    }
                    return acc;
                }, []).length;
            }).catch(err => {
                console.log(err);
            });
        })
        return {
            ...toRefs(data),
            ...toRefs(methods),
        };
    },
};
</script>

<style scoped>
    @import '../assets/css/dashboard.css';
</style>